<template>
  <!-- 报道指南详情页面 -->
  <view class="articleDetail">
     <view class="content"  > 
          <block
              v-for="i in detailData.content"
              :key="i.$index"
            >
        <view style="display: inline;"
            v-show="i.type === 'text'"
            v-html="i.text"
          ></view>
          <view style="color: #74b3e7; text-decoration: underline; display: inline;word-wrap: break-word; word-break: normal;"
            v-show="i.type === 'url'"
            @click.stop="copy(i.text)"
          >{{i.text}}</view>
   </block>
    </view>
  </view>
   
</template>
<script>
import './articleDetail.less'
import Taro from '@tarojs/taro'
export default {
  data() {
    return {
      id: '',
      type: '',
      detailData: {},
    }
  },
  created() {
    // 建议在页面初始化时把 getCurrentInstance() 的结果保存下来供后面使用，
    // 而不是频繁地调用此 API
    this.$instance = Taro.getCurrentInstance()
  },
  mounted() {
    // 获取路由参数
    this.id = this.$instance.router.params.id || '';
    this.type = this.$instance.router.params.type || '';
    console.log(this.$instance.router.params,'获取参数') // 输出 { id: 2, type: 'test' }
    this.getarticle();
  },
  methods: {

    navigate(href, e) {  //事件：点击富文本里的链接
      console.log('navigate', href);
      // plus.runtime.openURL(href)   //app中跳转外部链接
      // window.location = href;      //H5或者用window.open
      //跳转外链只能h5，公众号可以实现，小程序不支持跳转外链
    },

    copy(url){
      if(!url){
        return;
      }
        Taro.setClipboardData({
          data: url,
          success: function () {
            Taro.showToast({
              title: '网址已复制，请粘贴到浏览器打开',
              icon: 'none',
            })
          }
        })
    },

    getarticle() {
      let that = this
      that.flora.dash.dataApi.search({
        vars: {
          fields: ['id', 'name', 'content'],
          model: 'FreshProcessSteps',
          condition: {
            logic_operator: '&',
            children: [
              {
                leaf: {
                  field: 'is_show',
                  comparator: '=',
                  value: true,
                },
                leaf: {
                  field: 'setting_id.id',
                  comparator: '=',
                  value: this.$instance.router.params.id,  //传值当点击的流程事项id
                }
              },
            ]
          },
          limit: 10,
          offset: 0
        },
        cacheMode: 'no-cache',
      }).then((r) => {
        // console.log("指南详情==>", r.result)
        //使用数据源
        const str = [];
        (r?.result?.items || []).forEach((row) => {
          if (row?.data) {
            str.push(row?.data);
          }
        })
        //打印获取的数据源
        const _data = str[0];
        const assetsPath = that.$mConfig.assetsPath;
        let reg = new RegExp('src="/blobs/filds', 'g')//g代表全部 把字符串中所有=换成&&&
        _data.content = _data.content.replace(reg, ' mode="widthFix" src="' + assetsPath + '/blobs/filds');
        _data.content = _data.content.replace(/&nbsp;/g, '\xa0')
        // console.log("bef == content==>", _data.content)
        // var regex2 = /\[(.+?)\]/g;   // [] 中括号
        // var regex2 = /(\\[).*?(\\])/g;   // [] 中括号
        // var replaceArr = _data.content.match(regex2) ||[];
        // if(replaceArr != null && replaceArr.length >= 0){
        //     replaceArr.forEach(item => {
        //       let _url = item.substring(1,item.length-1)
        //       // console.log("item==>",item);
        //       _data.content = _data.content.replace(item, '<view @click="copy('+_url+')" style="color: #74b3e7;text-decoration: underline;">'+ _url +'</view>' );
        //     });
        // }
        _data.content = that.parseStr(_data.content);
        // console.log("content==>", _data.content)
        this.detailData = _data
        
        Taro.setNavigationBarTitle({
          title: this.detailData.name
        })
      })

    },

    parseStr(str) {
      const reg2 = /\[(.+?)\]/g;
      const list = str.split(reg2);
      console.log("parseStr==>",list);
      
      const result = []
      return list.map(c => {
        let tag
        c.startsWith("http") ? tag = 'url' : tag = 'text'
        return {
          type: tag,
          text: c
        }
      })
    }


  }
}
</script>

<style lang="less">
.articleDetail .content {
  line-height: 26px;
}
.articleDetail .content .h5-h3 {
  font-size: 18px !important;
  font-weight: bold;
  margin-top: 20px;
}

.articleDetail .content .h5-strong {
  font-size: 16px !important;
  font-weight: bold;
  margin-top: 20px;
}
</style>